<template>
	<div class="Vip">
			<p>会员充值</p>
			<hr>
			<div class="tc">
				<div class="year" @click="toRecharge">包年</div>
				<div class="season" @click="toRecharge">包季</div>
				<div class="month" @click="toRecharge">包月</div>
			</div>
	</div>
</template>

<script>
import {mapGetters} from 'vuex';
import {getRecharge,getUserOfId} from '../api/index'
export default {
	name: 'Vip',
	data(){
			return {
					
			}
	},
	computed:{
      ...mapGetters([
          'userId'
      ])
  },
	methods:{
		toRecharge(){
			getRecharge(this.userId).then(res=>{
					if(res.code){
							this.$message.success("充值会员成功")
							this.toGetUserInfo()
					}else{
							this.$message.error("充值会员失败")
					}
			})
		},
		toGetUserInfo(){
        if(this.userId){
            getUserOfId(this.userId)
            .then(res =>{
                this.userInfo=res;
                this.$store.commit.setUserId(res.id)
                this.$store.commit.setUsername(res.username)
                this.$store.commit.setAvator(res.avator)
                // console.log(res,'用户信息');
            })
            .catch(err => {
                console.log(err);
            })
        }
      }
	}
}
</script>

<style lang="scss" scoped>
.Vip{
	p{
		height: 50px;
    line-height: 50px;
    padding-left: 20px;
    font-size: 20px;
    font-weight: 600;
    color: #000;
	}
	.tc{
		margin-top: 30px;
		div{
			display: inline-block;
			margin-right: 30px;
			cursor: pointer;
			width: 120px;
			height: 60px;
			font-size: 16px;
			background-color: #fc3e7ecc;
			color: white;
			border-radius: 10px;
			text-align: center;
			line-height: 60px;
			box-shadow: 10px 10px 10px #fc3e7e55;
		}
	}
}
</style>